<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="http://cdn.webix.io/edge/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="http://cdn.webix.io/edge/webix.js" type="text/javascript" charset="utf-8"></script>
		
		<title>Raphael Chart</title>
		<script type="text/javascript" src="./d3.js"></script>
	</head>
	<body>
		<script type="text/javascript" charset="utf-8">
			webix.codebase = "./";

			webix.ui({
				type:"space", rows:[
					{ view:"d3-chart", 
						resize:true,
						url:"./data/flare.json",
						ready:function(){
							var format = d3.format(",d");
							var fill = d3.scale.category20c();
							var bubble = d3.layout.pack().sort(null).size([this.$width, this.$height]);

							function classes(root) {
								var classes = [];

								function recurse(name, node) {
									if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
									else classes.push({packageName: name, className: node.name, value: node.size});
								}

								recurse(null, root);
								return {children: classes};
							} 

							var vis = d3.select(this.$view).append("svg").attr("width", this.$width).attr("height", this.$height);

							var node = vis.selectAll("g.node")
								.data(bubble.nodes(classes(this.data))
									.filter(function(d) { return !d.children; }))
								.enter().append("g")
								.attr("class", "node")
								.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

							node.append("title")
								.text(function(d) { return d.className + ": " + format(d.value); });

							node.append("circle")
								.attr("r", function(d) { return d.r; })
								.style("fill", function(d) { return fill(d.packageName); });

							node.append("text")
								.attr("text-anchor", "middle")
								.attr("dy", ".3em")
								.text(function(d) { return d.className.substring(0, d.r / 3); });
					}}
				]
			});

		</script>
	</body>


	
</html>